
<template>
    <div>
        <Title :title="title"></Title>
        <div ref="bottom2" style="height: 150px;margin-top: 10px;"></div>
    </div>
</template>
<script>
import { Column } from '@antv/g2plot';
// 引入get请求 @表示src别名
import { get } from '@/utils/request';
//引入moment.js
import moment from 'moment';
//引入辅助函数
import {mapState} from 'vuex';
export default {
    data() {
        return {
            title: '风速曲线',
            params: {//接口请求参数
                page: 1,//页码
                pageSize: 100//每页数据量
            },
            mnData: [],//存储处理后的图表数据
            columnPlot:null//柱状图实例图像
        }
    },
    computed:{
        //从vuex的state中映射ed数据（设备/工程师信息）
        ...mapState(['ed'])
    },
    watch:{
        //深度监听ed的变化（设备信息变更时触发）
        ed:{
            handler(n,o){
                //根据设备信息重新查询数据 重新渲染图表
                this.params.engineer_id=n.engineer_id;
                this.params.device_id=n.device_id;
                this.getPlotData();
                //根据最新获取数据重新渲染图表
                this.columnPlot.changeData(this.mnData);
            },
            //深度监听
            deep:true
        }
    },
    methods: {
        //初始化并渲染柱状图
        loadPlot() {
            //基于容器创建柱状图实例
            this.columnPlot = new Column(this.$refs.bottom2, {
                data:this.mnData,
                xField: 'insert_time',
                yField: 'wind_speed',
                color: '#CABFFF', 
            });
            this.columnPlot.render();
        },
        async getPlotData() {
            let res = await get('/dashboard/pageQueryTodayData', this.params);
            // console.log(res,"获取响应");
            let mn = [];
            //将后端获取的数据设置给tempData
               
            //遍历list数组
            res.data.list.forEach((item, index, arr) => {
                 arr[0].wind_speed=5;
                //item表示数组的每一项
                item.insert_time = moment(item.insert_time).format("HH:mm")
                //由于查询数据密集，需要将数据处理，每个10条数据取一条数据
                if (index % 5 == 0) {
                    mn.push(arr[index])
                }
            })
            this.mnData = mn;
        }
    },
    async mounted() {
        //先获取数据，在渲染图表
        await this.getPlotData();
        this.loadPlot();
    }
}
</script>

<style lang="less" scoped></style>